<template>
	<view>
		<view class="detail-title2">
			{{chukuInfo.warehouseType}}
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">入库备件数量</view>
			<view class="right-title">{{chukuInfo.totalAmount}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">备件总价值</view>
			<view class="right-title">{{chukuInfo.totalMoney}}元</view>
		</view>
		<!-- <view class="gz-desc white-bg">
			<view class="title">故障描述</view>
			<view class="desc-reason">我们从分享时机、分享形式、分享动机、分享场景4个维度来聊聊「社交分享」的那些事儿分享场景4个维度来聊聊「社交分享」的那些事儿</view>
		</view> -->
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">关联工单号</view>
			<view class="right-title" style="display: flex;
					justify-content: space-between;
					align-items: center;">
				<view class="">
					{{chukuInfo.orderNum}}
				</view>
				<view v-if="chukuInfo.orderNum" class="copy" @click="copy(chukuInfo.orderNum)">复制</view>
			</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">申请人</view>
			<view class="right-title">{{chukuInfo.applyUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">操作人</view>
			<view class="right-title">{{chukuInfo.createUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">操作时间</view>
			<view class="right-title">{{chukuInfo.createTime}}</view>
		</view>
		<view class="top-title defalut-bg">
			<view class="left-title">入库备件列表</view>
			<!-- <view class="right-title right-ritle2">
				<view class="all-chuku">出库数量：2</view>
				<view class="all-btg">总价值：22元</view>
			</view> -->
		</view>
		<view v-for="(item,s) in chukuInfo.partDetailResponses" :key="s">
			<view class="list-wrapper">
				<view class="list-item">
					<view class="left-icon">
						<!-- 	<image
							:src="item.partPicture?item.partPicture:'https://img.js.design/assets/smartFill/img429164da758808.jpg'">
							<strong></strong>
						</image> -->
						<image :src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">
							<view class="txt1-left">{{item.partNum+item.partName}}</view>
							<!-- <view class="txt1-right" :class="[item.isPass?'':'txt1-right-notpass']">{{item.isPass?'已通过':'不通过'}}</view> -->
						</view>
						<view class="txt3">
							<view>{{item.partTypeName}}</view>
							<view style="color: #4D4D4D;">入库数量：{{item.amount}}</view>
						</view>
					</view>
				</view>
				<view v-for="(i,s) in item.partWarehouseDetails" :key="s">
					<view class="is-pass">
						<view class="ispass-title">入库批次信息</view>
						<view class="ispass-list">
							<view class="txt1">{{i.batchNum+'-'+i.expireDate}}</view>
							<view class="txt2">
								<view class="txt2-left">入库数量：<text style="color: #4D4D4D;">{{i.amount}}</text></view>
								<view class="txt2-left" style="margin-left: 200rpx;">单价：<text
										style="color: #4D4D4D;">{{i.price}}元</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				value2: 1,
				chukuId: '',
				chukuInfo: {}
			}
		},
		onLoad(options) {
			if (options) {
				this.chukuId = options.chukuId;
			}
			this.getChukudetailList();
		},
		methods: {
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
						uni.$u.toast('复制成功')
					}
				});
			},
			changeSelect(e) {
				console.log('改变了--->', this.value)
			},
			getChukudetailList() {
				uni.$u.http.get(`/device/mobile/devicePartWarehouse/appGetInfo/${this.chukuId}`).then(res => {
					if (res.code == 0) {
						this.chukuInfo = res.data;
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.right-ritle2 {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 24rpx;
		color: #8c8c8c;

		.all-chuku {
			color: #8c8c8c;
		}

		.all-btg {
			color: #8c8c8c;
		}
	}

	.list-wrapper {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 32rpx 0 24rpx 0;
			background: #fff;
			border-radius: 4px;
			margin: 10rpx 30rpx;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				width: 100%;

				.txt1 {
					font-size: 34rpx;
					color: #2B2B2B;
					width: 100%;
					// display: flex;
					// justify-content: space-between;

					// align-items: center;
					.txt1-left {
						width: 100%;
						font-size: 32rpx;
						color: #2B2B2B;
						// padding-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
						word-wrap: break-word;
					}

					.txt1-right {
						width: 150rpx;
						text-align: right;
						color: #0F53AC;
					}

					.txt1-right-notpass {
						color: #fa4016;
					}

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					width: 500rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #A6A6A6;
					font-size: 28rpx;
				}

				.txt4 {
					color: #fa4016;
					font-size: 28rpx;
					display: flex;
					align-items: center;
				}
			}
		}

	}

	.list-item :last-child {
		border-bottom: none;
	}

	.copy {
		color: rgba(166, 166, 166, 1);
		font-size: 20rpx;
		margin-left: 10rpx;
		border-radius: 8rpx;
		background: rgba(166, 166, 166, 0.3);
		padding: 4px 6px 4px 6px;
	}

	.bx-list {
		background: #f2f2f2;
		margin: 0 20rpx;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;

			.left {
				display: flex;
				font-size: 34rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);

				.kucun-num {
					font-size: 28rpx;
					color: #8c8c8c;
					margin-left: 20rpx;
				}
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.right-input {
					width: 100%;
					text-align: right;
					display: flex;
					align-items: center;
				}

				.txt-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10rpx;

					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
					}

					.addnum {
						.minus {
							color: #0F53AC;
							font-size: 34rpx;
						}

						.plus {
							color: #0F53AC;
							font-size: 34rpx;
						}

						.notselect-bg {
							color: #c4c4c4;
							font-size: 34rpx;
						}
					}
				}
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.delete-pc {
		color: #fa4016;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		background: #f2f2f2;
		margin: 2rpx 20rpx 0 20rpx;
		padding: 20rpx 0;
	}

	.addbtn-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;

		.add-btn {
			border-radius: 12rpx;
			border: 1px solid #0F53AC;
			margin-top: 30rpx;
			padding: 15rpx 0;
			width: 340rpx;
			text-align: center;
			color: #0F53AC;
		}
	}

	.is-pass {
		.ispass-title {
			font-size: 28rpx;
			color: #8c8c8c;
			padding: 20rpx 30rpx;
		}

		.ispass-list {
			margin: 10rpx 30rpx;
			background: #f2f2f2;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			padding: 20rpx;

			.txt1 {
				font-size: 34rpx;
				color: #000000;
			}

			.txt2 {
				font-size: 24rpx;
				color: #8c8c8c;
				display: flex;
				margin-top: 20rpx;

				.txt2-left {}
			}
		}
	}
</style>